<template>
    <div class="detail_body">
        <el-scrollbar height="100%">
            <!-- {{detaildata}} -->
            <WinDrawLose v-if="!detailstore.isEmpty(detaildata.m)" :data="detaildata.m"/>
            <Handicap v-for="(item,index) in detaildata.other" :key="index" :data="item"/>
        </el-scrollbar>
    </div>
</template>

<script setup>
import Handicap from "./Handicap.vue";
import WinDrawLose from "./WinDrawLose.vue";
const { detailstore, detailstate } = inject('detailSell')

const detaildata = computed(() => {
    let a = {
        m: {},
        other: []
    }
    let b = JSON.parse(JSON.stringify(detailstate.matchdetail.handicapmapActive))
    Object.keys(b).forEach(key => {
        let value = b[key]
        if (key.includes('M')) {
            a.m = value
            delete b[key]
        }
    })
    a.other = sortObjectByFields(b)
    
    return a
})

function sortObjectByFields(obj) {
  // 将对象的键拆分为两组：包含 "R" 或 "OU" 的键，和其他键
  const keys = Object.keys(obj);
  const containsRorOU = key => key.includes('R') || key.includes('OU');
  
  const priorityKeys = keys.filter(k => containsRorOU(k));
  const otherKeys = keys.filter(k => !containsRorOU(k));
  
  // 合并两组键（优先级键在前，其他键在后）
  const sortedKeys = [...priorityKeys, ...otherKeys];
  
  // 转换为键值对数组
  return sortedKeys.map(key => obj[key]);
}
</script>

<style lang="scss" scoped>
.detail_body {
    width: 100%;
    height: calc(100% - 50px);
    // background-color: red;
}
</style>